<template>
  <view class="body">
    <image class="img_bg" src="https://ainengli.hzjrsw.com/jkhx/reportResultBg.png" />
    <view class="title_info">
      <view class="title">{{ reportInfo.name }}</view>
      <view class="date">报告时间： {{ reportInfo.date }}</view>
    </view>
    <view class="content">
      <view class="item_top">
        <view class="result_title">报告解读结果</view>
      </view>
      <view class="result">
        <text class="result_text">{{ result }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import store from '@/store'

const type = ref('')
const reportInfo = reactive({
  name: '',
  date: ''
})
const reportDetail = ref({})
const result = ref('')

const answerWs = reactive({
  ws: null,
  isConnect: false,
  lockReconnect: false,
  result: '',
  finish: true
})
const socketTask = ref(null)

onLoad((option) => {
  type.value = option.type ? option.type : ''
  reportInfo.name = option.name ? option.name : ''
  reportInfo.date = option.date ? option.date.split(' ')[0] : ''
  reportDetail.value = store.state.REPORTINFO
  initAskWebSocket()
})

const initAskWebSocket = () => {
  uni.showLoading({
    title: '正在解读中...'
  })
  const url = 'wss://ainengli.hzjrsw.com/baogao/ws/chat/analyze/'
  const checkInfo = [
    {
      checkName: reportInfo.name,
      checkFind: reportDetail.value.forward,
      checkResult: reportDetail.value.result
    }
  ]
  const zndzParam = {
    type: type.value == 'inspect' ? 'test' : 'check',
    query: '',
    history: [],
    sex: '',
    age: '',
    content: type.value == 'inspect' ? reportDetail.value : checkInfo
  }
  if (uni.getSystemInfoSync().uniPlatform == 'mp-weixin') {
    answerWs.ws = uni.connectSocket({
      url: url,
      complete: () => {}
    })
    answerWs.ws.onOpen((res) => {
      answerWs.isConnect = true
      answerWs.ws.send({
        data: JSON.stringify(zndzParam)
      })
    })
    answerWs.ws.onMessage((res) => {
      let obj = JSON.parse(res.data)
      result.value += obj.answer
      if (obj.final == 1) {
        uni.hideLoading()
      }
    })
  }
  if (uni.getSystemInfoSync().uniPlatform == 'mp-alipay') {
    socketTask.value = my.connectSocket({
      url: url, // 此 url 仅为示例，开发者可替换自己的 URL
      multiple: true, // multiple 为 true 则会返回 socketTask
      success: (res) => {
        console.log('connectSocket1 成功' + JSON.stringify(res))
      },
      fail: (res) => {
        console.log('connectSocket1 失败' + JSON.stringify(res))
      }
    })
    socketTask.value.onOpen(function (res) {
      console.log('websocket链接成功')
    })
    socketTask.value.onClose(function (res) {
      console.log('socketTask1.onClose' + JSON.stringify(res))
    })
    socketTask.value.onError(function (res) {
      console.log('socketTask1.onError' + JSON.stringify(res))
    })
    socketTask.value.onMessage(function (res) {
      let obj = JSON.parse(res.message)
    })
  }
}
</script>

<style lang="scss" scoped>
.body {
  width: 100%;
  height: 100vh;
  position: relative;
  background: #F3F7F8;
  overflow: hidden;
  box-sizing: border-box;
  .img_bg {
    position: absolute;
    width: 100%;
    height: 522rpx;
    top: 0;
    left: 0;
    z-index: 1;
  }
  .title_info {
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 10;
    .title {
      font-weight: 600;
      font-size: 40rpx;
      color: #222222;
      margin-top: 48rpx;
      margin-left: 32rpx;
    }
    .date {
      font-weight: 400;
      font-size: 28rpx;
      color: #666666;
      margin-top: 16rpx;
      margin-left: 32rpx;
    }
  }
  .content {
    background: #ffffff;
    border-radius: 16rpx;
    padding: 32rpx;
    margin: 70rpx 32rpx 0;
    position: relative;
    z-index: 10;
    .item_top {
      border-bottom: 1rpx solid #e5e6eb;
      margin-bottom: 30rpx;
      padding-bottom: 24rpx;
      .result_title {
        width: 240rpx;
        box-sizing: border-box;
        background: #00d1b6;
        border-radius: 24rpx 0rpx 24rpx 0rpx;
        font-weight: 500;
        font-size: 32rpx;
        color: #ffffff;
        padding: 6rpx 24rpx;
      }
    }
    .result {
      background: #fafafa;
      border-radius: 12rpx;
      padding: 24rpx;
      max-height: 800rpx;
      overflow: auto;
      .result_text {
        font-weight: 400;
        font-size: 30rpx;
        color: #222222;
        line-height: 54rpx;
        text-align: justify;
      }
    }
  }
}
</style>
